<template>
  <div class="degaoMap-comp-ct">
    <mt-header :title="header_title" fixed>
      <mt-button icon="back" @click="$router.back(-1)" slot="left">返回</mt-button>
    </mt-header>
    <el-amap
      vid="dgmap"
      :amap-manager="amapManager"
      :center="mapData.center"
      :zoom="mapData.zoom"
      class="amap"
      :animation="mapData.animation"
    >
      <el-amap-marker :position="local.position"></el-amap-marker>
    </el-amap>
    <mt-button @click="getMap" type="primary">getmap</mt-button>
    <mt-button @click="addMarker" type="primary">添加点</mt-button>
  </div>
</template>
<script>
import {lazyAMapApiLoaderInstance} from 'vue-amap'
import { AMapManager } from "vue-amap";
export default {
  name: "degaoMap",
  data() {
    return {
      header_title: "德高地图",
      amapManager: new AMapManager(),
      mapData: {
        center: [108.347894, 22.819187],
        zoom: 15,
        animation: "AMAP_ANIMATION_BOUNCE"
      },
      local: {
        position: [108.347894, 22.819187]
      },
      myMap: false
    };
  },
  methods: {
    getMap() {
      //获取地图实例，之后可以使用高德的API
      let map = this.amapManager.getMap();
      console.log(map);
    },
    addMarker() {
      // if(!this.myMap)
      //   this.myMap = this.amapManager.getMap();

      let lngfix = (Math.random() - 0.5) * 0.005
      let latfix = (Math.random() - 0.5) * 0.005
      this.mapData.center[0] += lngfix
      this.mapData.center[1] += latfix
      var marker = new AMap.Marker({
        position: this.mapData.center, 
        title: "new",
        label:{content: "<div >new</div>",offset: new AMap.Pixel(-5, 35)}
      });

      // 将创建的点标记添加到已有的地图实例：
      this.myMap.add(marker);
    }
  },
  mounted() {
    //懒加载amap
    lazyAMapApiLoaderInstance.load().then(() => {
        this.myMap = this.amapManager.getMap();
      // this.map = new AMap.Map("dgmap", {
      //   center: new AMap.LngLat(108.347894,22.819187),
      //   zoom: 15,
      // });
    });
  }
};
</script>
<style lang="scss" scoped>
.degaoMap-comp-ct {
  .amap {
    height: 500px;
  }
}
</style>
